<template>
  <page-view
    avatar=""
    :title="false"
    :header-disabled="true"
  >
    <CenterVue>
      <div class="draw">
        <span>| 商品管理 ></span> 商品列表
        <a-form>
          <div class="tool">
            <a-select
              default-value="请选择"
              :name="mySelection"
              style="width: 100px;"
              @change="handleSelect"
            >
              <a-select-option
                value="请选择"
                disabled
              >
                请选择
              </a-select-option>
              <a-select-option value="goodsName">
                商品名称
              </a-select-option>
              <a-select-option value="goodsType">
                商品品类
              </a-select-option>
              <a-select-option value="goodsLocation">
                商品产地
              </a-select-option>
            </a-select>
            <a-input
              type="text"
              style="width: 50%"
              v-model="queryParam"
              :placeholder="Tips"
            />
            <a-button
              type="primary"
              icon="search"
              @click="queryBySelection"
            >
              Search
            </a-button>
            <!--新增商品按钮-->
            <a-button
              style="margin-left: 260px;"
              icon="plus"
              @click="newItemModal = true"
            >
              新商品
            </a-button>
          </div>
        </a-form>
        <a-input-group compact />
        <div class="my_table">
          <template>
            <a-table
              :columns="columns"
              :data-source="data"
              :scroll="{y: 750 }"
              :pagination="pagination"
              :current="pagination.current"
              row-key="id"
              @change="tableChange"
              bordered
            >
              <template
                slot="action"
                slot-scope="record"
              >
                <a-button
                  type=""
                  slot="action"
                  @click="getInfo(record)"
                >
                  详情
                </a-button>
                <a-button
                  type="primary"
                  slot="action"
                  @click="showDrawer(record)"
                >
                  修改
                </a-button>
                <a-popconfirm
                  placement="left"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirm"
                  @cancel="cancel"
                >
                  <template slot="title">
                    <p>{{ title }}</p>
                    <p>商品ID: {{ goodsItemSelected.id }}</p>
                  </template>
                  <a-button
                    type="danger"
                    @click="getGoodsId(record)"
                  >
                    Delete
                  </a-button>
                </a-popconfirm>
              </template>
            </a-table>
          </template>
        </div>
        <!--商品修改 -->
        <a-drawer
          title="商品详情 ~/~ 商品修改"
          placement="right"
          :width="720"
          :closable="false"
          :visible="visible"
          :get-container="false"
          :wrap-style="{ position: 'absolute' }"
          @close="onClose"
        >
          <!--form-->
          <div>
            <a-form
              :form="form"
              layout="vertical"
              hide-required-mark=""
            >
              <!--图片-->
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="">
                    <img
                      :src="goodsItemSelected.bigAvatar"
                      :alt="goodsItemSelected.goodsDescription"
                    >
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="商品名:">
                    <a-input
                      :value="goodsItemSelected.goodsName"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="价格:">
                    <a-input
                      :value="goodsItemSelected.goodsPrice"
                      type="number"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="品类:">
                    <a-input
                      :value="goodsItemSelected.goodsType"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="产地:">
                    <a-input
                      :value="goodsItemSelected.location"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="出厂日期:">
                    <a-input
                      :value="goodsItemSelected.dateOfProduction"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="保质期:">
                    <a-input
                      :value="goodsItemSelected.Expiration"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="口味:">
                    <a-input
                      :value="goodsItemSelected.goodsFlavor"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="材质工艺:">
                    <a-input
                      :value="goodsItemSelected.Material"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="供应商:">
                    <a-input
                      :value="goodsItemSelected.supplier"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="特色说明:">
                    <a-input
                      :value="goodsItemSelected.goodsDescription"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <a-button
            :style="{ marginRight: '20px' }"
            @click="onClose"
          >
            取消
          </a-button>
          <a-button
            type="primary"
            @click="onClose"
          >
            提交
          </a-button>
        </a-drawer>
        <!--订单详情  model-->
        <div>
          <a-modal
            v-model="infoModal"
            title="商品管理 ~/~ 商品详情"
            centered
            :width="900"
            :height="800"
            @ok="infoModal = false"
          >
            <div>
              <!--图片-->
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="">
                    <img
                      :src="goodsItemSelected.smallAvatar"
                      alt=""
                    >
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="">
                    <img
                      :src="goodsItemSelected.bigAvatar"
                      alt=""
                    >
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="商品名称:">
                    <a-input
                      :value="goodsItemSelected.goodsName"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="产地:">
                    <a-input
                      :value="goodsItemSelected.location"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="品类:">
                    <a-input
                      :value="goodsItemSelected.goodsType"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="出厂日期:">
                    <a-input
                      :value="goodsItemSelected.dateOfProduction"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="口味:">
                    <a-input
                      :value="goodsItemSelected.goodsFlavor"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="保质期:">
                    <a-input
                      :value="goodsItemSelected.Expiration"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="材质工艺:">
                    <a-input
                      :value="goodsItemSelected.Material"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="供应商:">
                    <a-input
                      :value="goodsItemSelected.supplier"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="价格:">
                    <a-input
                      :value="goodsItemSelected.goodsPrice"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="特色说明:">
                    <a-input
                      :value="goodsItemSelected.goodsDescription"
                      :read-only="true"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-modal>
        </div>
        <!--新增商品  model-->
        <div>
          <a-modal
            v-model="newItemModal"
            title="商品管理 ~/~ 商品详情"
            centered
            :width="900"
            :height="800"
            @ok="newItemModal = false"
          >
            <div>
              <!--图片-->
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-upload
                    name="smallAvatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img
                      v-if="imageUrl"
                      :src="imageUrl"
                      alt="avatar"
                    >
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">
                        Upload
                      </div>
                    </div>
                  </a-upload>
                </a-col>
                <a-col :span="12">
                  <a-upload
                    name="bigAvatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img
                      v-if="imageUrl"
                      :src="imageUrl"
                      alt="avatar"
                    >
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">
                        Upload
                      </div>
                    </div>
                  </a-upload>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="商品名称:">
                    <a-input
                      :value="newGoods.goodsName"
                      v-decorator="[
                        'goodsName',
                        {
                          rules: [{ required: true, message: '商品名不能为空!' }],
                        },
                      ]"
                      placeholder="请输入商品名称..."
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="出厂日期:">
                    <a-date-picker
                      @change="onDateChange"
                      v-decorator="[
                        'dateOfProduction',
                        {
                          rules: [{ required: true, message: '出厂日期不能为空' }],
                        },
                      ]"
                      placeholder="请选择出厂日期..."
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="品类:">
                    <a-input
                      :value="newGoods.goodsType"
                      v-decorator="[
                        'goodsType',
                        {
                          rules: [{ required: true, message: '商品品类不能为空' }],
                        },
                      ]"
                      placeholder="请输入商品类..."
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="产地:">
                    <a-input
                      :value="newGoods.location"
                      v-decorator="[
                        'location',
                        {
                          rules: [{ required: true, message: '产地不能为空' }],
                        },
                      ]"
                      placeholder="请输入商品产地..."
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="口味:">
                    <a-input
                      :value="newGoods.goodsFlavor"
                      v-decorator="[
                        'goodsFlavor',
                        {
                          rules: [{ required: true, message: '商品口味不能为空' }],
                        },
                      ]"
                      placeholder="商品口味..."
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="保质期:">
                    <a-input
                      :value="newGoods.Expiration"
                      v-decorator="[
                        'Expiration',
                        {
                          rules: [{ required: true, message: '保质期不能为空' }],
                        },
                      ]"
                      placeholder="请输入商品保质期..."
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="材质工艺:">
                    <a-input
                      :value="newGoods.Material"
                      v-decorator="[
                        'Material',
                        {
                          rules: [{ required: true, message: '材质工艺不能为空' }],
                        },
                      ]"
                      placeholder="请输入商品的材质工艺..."
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="供应商:">
                    <a-input
                      :value="newGoods.supplier"
                      v-decorator="[
                        'supplier',
                        {
                          rules: [{ required: true, message: '供应商不能为空' }],
                        },
                      ]"
                      placeholder="请输入商品供应商..."
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="价格:">
                    <a-input
                      :value="newGoods.goodsPrice"
                      v-decorator="[
                        'goodsPrice',
                        {
                          rules: [{ required: true, message: '价格不能为空' }],
                        },
                      ]"
                      placeholder="请输入商品价格..."
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="特色说明:">
                    <a-input
                      :value="newGoods.goodsDescription"
                      v-decorator="[
                        'goodsDescription',
                        {
                          rules: [{ required: true, message: '请补充商品的特色说明' }],
                        },
                      ]"
                      placeholder="请输入商品的特色说明..."
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-modal>
        </div>
      </div>
    </CenterVue>
  </page-view>
</template>

<script>
import CenterVue from '@/components/CenterVue'
// 设置表头参数
const columns = [
  { title: '产品名', width: 80, dataIndex: 'goodsName', align: 'center' },
  { title: '品类', width: 70, dataIndex: 'goodsType', align: 'center' },
  { title: '产地', dataIndex: 'location', key: 'location', width: 100, align: 'center' },
  { title: '出厂日期', dataIndex: 'dateOfProduction', key: 'dateOfProduction', width: 100, align: 'center' },
  { title: '保质期', dataIndex: 'Expiration', key: 'Expiration', width: 100, align: 'center' },
  { title: '供应商', dataIndex: 'supplier', key: 'supplier', width: 100, align: 'center' },
  { title: '包装规格', dataIndex: 'packaging', key: 'packaging', width: 100, align: 'center' },
  { title: '价格', dataIndex: 'goodsPrice', key: 'goodsPrice', width: 80, align: 'center' },
  {
    title: '操作',
    align: 'center',
    key: 'operation',
    width: 200,
    scopedSlots: { customRender: 'action' }
  }
]
// 假数据
const data = []
for (let i = 1; i < 100; i++) {
  data.push({
    id: i,
    goodsName: `A ${i}`,
    goodsType: 'SSS',
    goodsFlavor: 'SPIC',
    goodsPrice: 9.9,
    goodsDescription: 'VERY GOOD~',
    location: 'CD',
    dateOfProduction: '10-24',
    Expiration: '6',
    Material: '....',
    supplier: 'C',
    packaging: '1KG',
    smallAvatar: '',
    bigAvatar: ''
  })
}

// 图片上传
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

export default {
  name: 'GoodsOrder',
  components: {
    CenterVue
  },
  data () {
    return {
      // 查询框提示消息
      Tips: '支持按商品名,商品品类,产地进行查询...',
      // 查询下拉框选择
      mySelection: '',
      // 查询条件参数
      queryParam: '',
      // 删除确认框标题
      title: '您确定要删除该商品吗 ?',
      // 表单
      form: this.$form.createForm(this),
      // 修改抽屉是否可见
      visible: false,
      // 详情弹窗是否可见
      infoModal: false,
      // 添加新商品弹窗是否可见
      newItemModal: false,
      // 加载动画
      loading: false,
      // 图片url
      imageUrl: '',
      // 数据源
      data,
      // 表格表头
      columns,
      // 选择商品id
      idSelected: 0,
      // 被选择商品对象
      goodsItemSelected: {
        id: 10,
        goodsName: '',
        goodsType: '',
        goodsFlavor: '',
        goodsPrice: 0,
        goodsDescription: '',
        location: '',
        dateOfProduction: '',
        Expiration: '',
        Material: '',
        supplier: '',
        packaging: '',
        smallAvatar: '',
        bigAvatar: ''
      },
      // 新商品对象
      newGoods: {
        goodsName: '',
        goodsType: '',
        goodsFlavor: '',
        goodsPrice: 0,
        goodsDescription: '',
        location: '',
        dateOfProduction: '',
        Expiration: '',
        Material: '',
        supplier: '',
        packaging: '',
        smallAvatar: '',
        bigAvatar: ''
      },
      // 分页器
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 8
        // 每页展示数据条数 默认关闭
        // showSizeChanger: true,
        // pageSizeOptions: ['5', '10', '15', '20']
      }
    }
  },
  created () {
    this.idSelected = this.goodsItemSelected.id
  },
  methods: {
    // table
    getInfo (obj) {
      this.infoModal = true
      this.goodsItemSelected = obj
      alert(JSON.stringify(this.goodsItemSelected))
      console.log('每页数据:' + this.pagination.defaultPageSize)
      console.log('当前页码:' + this.pagination.current)
    },
    tableChange (e) {
      this.pagination.current = e.current
    },
    // 抽屉
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer (obj) {
      this.visible = true
      this.goodsItemSelected = obj
      alert(JSON.stringify(this.goodsItemSelected))
    },
    onClose () {
      this.visible = false
    },
    // modal..
    // 查询条件切换
    handleSelect (e) {
      console.log(e)
      if (e === 'goodsName') {
        this.Tips = '请输入商品名,进行查询. eg. 大食代...'
        this.mySelection = e
      } else if (e === 'goodsType') {
        this.Tips = '请输入商品品类,进行查询. eg.香辣,麻辣,爽啦...'
        this.mySelection = e
      } else if (e === 'goodsLocation') {
        this.Tips = '请输入商品产地.进行查询. eg.四川,北境,上海...'
        this.mySelection = e
      }
    },
    // 监听输入框的变化
    handleInput (e) {
      console.log(e)
    },
    // 按条件查询
    queryBySelection () {
      alert(this.mySelection + ' : ' + this.queryParam)
    },
    // 图片上传
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    // 日期选项函数
    onDateChange (date, dateString) {
      console.log(date, dateString)
    },
    // 删除商品前,获取被删除商品的id
    getGoodsId (obj) {
      this.goodsItemSelected = obj
      this.idSelected = this.goodsItemSelected.id
    },
    // 删除商品按钮
    confirm (e) {
      console.log(e)
      // 进行删除操作
      this.$message.success('Click on Yes')
    },
    cancel (e) {
      console.log(e)
      this.$message.error('操作取消!')
    }
  }
}
</script>

<style scoped>
.draw {
  height: 800px;
  width: 1200px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ebedf0;
  borderRadius: 2px;
  padding: 48px;
  textAlign: center;
  background: #fafafa
}

.tool {
  margin-top: 10px;
  display: flex;
}

.my_table {
  margin-top: 10px;
}

span {
  font-weight: bolder;
  font-size: 25px;
}

img {
  background-color: #b7b7b7;
  width: 400px;
  height: 150px;
}
</style>
